<template>

<div class="mt-list">
  <van-pull-refresh
  class="refresh"
    v-model="refreshLoading"
    success-text="刷新成功！"
    @refresh="onRefresh"
  >
  <van-empty
    v-if="initiatedMeetingList.length === 0 && joinMeetingLsit.length === 0 && (!joinLoading && !initiatedLoading)"
    image-size="12rem"
    description="暂无会议"
  />
    <template v-else>
      <template v-if="joinLoading && initiatedLoading">
        <van-skeleton animate :row="3" />
        <van-skeleton animate :row="3" />
        <van-skeleton animate :row="3" />
        <van-skeleton animate :row="3" />
        <van-skeleton animate :row="3" />
      </template>
      <template v-else>
        <div class="mt-list-body">
          <div
            class="mt-list-body-title"
            v-show="initiatedMeetingList.length !== 0"
          >
            我发起的会议
          </div>
          <div
            v-waves
            class="mt-list-item"
            v-for="item in initiatedMeetingList"
            :key="item.id"
            @click="meetingItemHandle(item)"
          >
            <meeting-item :item="item" />
          </div>
        </div>
        <div class="mt-list-body">
          <div
            class="mt-list-body-title"
            v-show="joinMeetingLsit.length !== 0"
          >
            我参加的会议
          </div>
          <div
            v-waves
            class="mt-list-item"
            v-for="item in joinMeetingLsit"
            :key="item.id"
            @click="goMyJoinMeeting(item)"
          >
            <meeting-item :item="item" />
          </div>
        </div>
      </template>
    </template>
  </van-pull-refresh>
</div>
</template>

<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { clearTimer } from "@/utils/util.js"
import {
  getUserInitiatedMeetingList,
  getUserJoinMeetingList,
} from '@/api/home/home.js'
import MeetingItem from './MeetingItem.vue'

export default {
name: "MeetingList",
components: { MeetingItem },
props: ["zoningHeight"],
emits: ["onRefresh"],
setup(props, context) {
    const router = useRouter();
    const store = useStore()

    const number = computed(() => store.getters.getUserNumber);
    const userType = computed(() => store.getters.getUserType);
    const wavesTime = computed(() => store.getters.getWavesTime)

    let joinLoading = ref(true);
    let initiatedLoading = ref(true);
    let timer = null;
    onMounted(() => {
        getUserInitiatedMeeting();
        getUserJoinMeeting();
    });
    const refreshLoading = ref(false);
    // 刷新处理函数
    function onRefresh() {
      getUserInitiatedMeeting();
      getUserJoinMeeting();
      context.emit("onRefresh")
    }
    // 用户发起会议点击处理函数
    function meetingItemHandle(item) {
      console.log(item);
      const meetingStatus = item.meetingStatus;
      // 跳转类型
      let type = 1;
      // 会议状态为 0 ， 身份是普通用户， 跳转到 修改会议
      if (meetingStatus === 0 && userType.value === 10)
          type = 1;
      // 会议状态为 2 ， 身份是普通用户， 跳转到 重新发起会议
      else if (meetingStatus === 2 && userType.value === 10)
          type = 2;
      // 会议状态为 2 ， 身份是 领导或超级管理员， 跳转到 确认发起会议
      else if (meetingStatus === 0 &&
          (userType.value === 20 || userType.value === 30))
          type = 3;
      if (meetingStatus === 0 || meetingStatus === 2) {
          timer = setTimeout(() => {
              router.push({
                  path: "/applymeeting",
                  query: {
                      id: item.id,
                      type,
                  },
              });
          }, wavesTime.value);
      }
      else if (meetingStatus === 1 ||
          meetingStatus === 3 ||
          meetingStatus === 4 ||
          meetingStatus === 5 ||
          meetingStatus === 6) {
          timer = setTimeout(() => {
              router.push({
                  path: "/meeting",
                  query: {
                      id: item.id,
                  },
              });
          }, wavesTime.value);
      }
    }
    // 用户参会处理函数
    function goMyJoinMeeting(item) {
        timer = setTimeout(() => {
            router.push({
                path: "/meeting",
                query: {
                    id: item.id,
                },
            });
        }, wavesTime.value);
    }
    // 发起的会议
    const initiatedMeetingList = ref([]);
    // 参加的会议
    const joinMeetingLsit = ref([]);
    // 获取用户开会会议列表
    async function getUserInitiatedMeeting() {
        const res = await getUserInitiatedMeetingList({
            userNumber: number.value,
            status: 1,
        });
        console.log(res.data);
        initiatedMeetingList.value = res.data.data;
        // 取消骨架屏
        initiatedLoading.value = false;
        // 关闭下拉刷新
        refreshLoading.value = false;
    }
    // 获取用户参会会议列表
    async function getUserJoinMeeting() {
        const res = await getUserJoinMeetingList({
            userNumber: number.value,
            status: 1,
        });
        // 取消骨架屏
        joinLoading.value = false;
        // 关闭下拉刷新
        refreshLoading.value = false;
        console.log(res.data);
        joinMeetingLsit.value = res.data.data;
    }
    onUnmounted(() => {
        clearTimer(timer);
    });
    return {
      initiatedMeetingList,
      joinMeetingLsit,
      joinLoading,
      initiatedLoading,
      number,
      userType,
      refreshLoading,
      meetingItemHandle,
      goMyJoinMeeting,
      onRefresh,
    };
},
    
}
</script>

<style lang="scss" scoped>
.mt-list {
    height: calc(100vh - v-bind(zoningHeight) - var(--nav-top-bar-height));
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 1rem;
    
    .refresh {
      width: 100%;
      height: 100%;
      overflow: auto;
      display: flex;
      flex-direction: column;
      background-color: var(--background_color);
      .van-skeleton {
        margin-top: 2rem;
      }

      .mt-list-body {
        box-sizing: border-box;
        padding: 0 1rem;

        &-title {
          height: 2.5rem;
          line-height: 2.5rem;
          width: 100%;
          box-sizing: border-box;
          color: var(--second-text-color);
          padding-left: 1rem;
          font-size: var(--second-text-size);
          background-color: var(--background_color);
          position: sticky;
          left: 0;
          top: -1px;
          font-weight: var(--second-text-weight);
        }
        .mt-list-item {
          width: 100%;
          height: 9rem;
          margin-bottom: 1rem;
          border-radius: 0.8rem;
          background-color: var(--item_background_color);
          box-sizing: border-box;
          display: flex;
          padding: 1.5rem 1.5rem 1.5rem 0;
          box-shadow: var(--box-shadow);
        }
      }
    }
  }
  @media screen and (min-width: 700px) {
    .mt-list  {
      height: 100vh;

    }
  }
</style>